<template>
  <div class="about">
    <ul class="menu">
      <li class="menu-item">
        test1
        <ul class="menu-two">
          <li class="menu-item">
            test1
            <ul class="menu-three">
              <li class="menu-item">test3</li>
              <li class="menu-item">test3</li>
              <li class="menu-item">test3</li>
              <li class="menu-item">test3</li>
            </ul>
          </li>
          <li class="menu-item">test2</li>
        </ul>
      </li>
      <li class="menu-item">test2</li>
    </ul>
  </div>
</template>
<style scoped>
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu {
  position: relative;
}
.menu-two {
  position: absolute;
  left: 80px;
  top: 0;
  display: none;
}
.menu-three {
  position: absolute;
  left: 80px;
  top: 0;
  width: max-content;
  display: none;
}
.menu-item {
  width: 80px;
  height: 80px;
  background: palegoldenrod;
  line-height: 80px;
}
.menu-two .menu-item {
  background: palegreen;
}
.menu-three .menu-item {
  background: rgb(112, 153, 230);
  width: 80px;
  height: 24px;
  line-height: 24px;
}
.menu-item:hover > ul {
  display: block;
}
.menu-item:hover > .menu-three {
  display: flex;
}
</style>


